<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml"
                xmlns:framework="http://java.sun.com/jsf/composite/components">
    <ui:define name="head">
        <h:outputScript>
            $(function () {
                PF('authButton').disable();
            })

            function onSelectRows() {
                const count = PF('role_dataTable').getSelectedRowsCount();
                if (count === 1) {
                    PF('authButton').enable()
                } else {
                    PF('authButton').disable()
                }
            }
        </h:outputScript>
    </ui:define>
    <ui:define name="content">
        <div class="card">
            <h:form id="contentform" prependId="false">
                <framework:dataTable id="role" formDialogId="role" lazy="true"
                                     headText="#{msg['blog']['roleManagement']}"
                                     value="#{controller.dataModel}" onRowClick="onSelectRows()"
                                     singleSelection="#{viewScope.sinSelected}"
                                     multipleSelection="#{viewScope.mulSelected}">

                    <p:ajax event="cellEdit" listener="#{controller.cellEdit}" global="false"
                            update="@widgetVar(resource_dataTable)"/>
                    <f:facet name="toolbar">
                        <p:commandButton value="#{msg['blog']['auth']}"
                                         icon="pi pi-key"
                                         widgetVar="authButton"
                                         action="#{controller.auth}"
                                         update="@widgetVar(perms_dialog)"
                                         oncomplete="PF('perms_dialog').show()"/>
                    </f:facet>
                    <p:column headerText="#{msg['blog']['seq']}" field="seq" filterMatchMode="contains" width="80">
                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="#{element.seq}"/>
                            </f:facet>
                            <f:facet name="input">
                                <p:inputNumber value="#{element.seq}" decimalPlaces="0"/>
                            </f:facet>
                        </p:cellEditor>
                    </p:column>
                    <p:column headerText="#{msg['blog']['name']}" field="name" filterMatchMode="contains"/>
                    <p:column headerText="#{msg['blog']['code']}" field="code" filterMatchMode="contains"/>
                    <p:column headerText="#{msg['framework']['operatedTime']}" sortBy="operatedTime"
                              sortable="true" width="150"
                              sortOrder="desc" sortPriority="1">
                        <h:outputText value="#{element.operatedTime}">
                            <f:convertDateTime type="localDateTime"
                                               pattern="#{msg['format']['localDateTime']}"/>
                        </h:outputText>
                    </p:column>
                    <p:column headerText="#{msg['blog']['remark']}" field="remark" filterable="false" sortable="false"/>
                </framework:dataTable>
            </h:form>
        </div>
    </ui:define>
    <ui:define name="dialog">
        <h:form id="dialog_form">
            <framework:dialog id="role" value="#{viewScope.vo}" saveUpdate="role:dataTable">

                <framework:label target="name" value="#{msg['blog']['name']}" styleClass="p-col-6">
                    <p:inputText id="name" value="#{viewScope.vo.name}" required="true"/>
                </framework:label>

                <framework:label target="code" value="#{msg['blog']['code']}" styleClass="p-col-6">
                    <p:inputText id="code" value="#{viewScope.vo.code}" required="true"/>
                </framework:label>

                <framework:label target="remark" value="#{msg['blog']['remark']}">
                    <p:inputTextarea id="remark" value="#{viewScope.vo.remark}" autoResize="false"/>
                </framework:label>

            </framework:dialog>
        </h:form>
        <h:form id="perms_form">
            <framework:dialog id="perms" value="#{viewScope.vo}" saveUpdate="@widgetVar(role_dataTable)">

                <p:fieldset legend="#{msg['blog']['authAccess']}" styleClass="p-col-12 p-mb-3">
                    <h:outputText rendered="#{fn:length(viewScope.rootTree.children) == 0}"
                                  value="#{msg['framework']['noRecords']}" style="line-height: 30px;"/>
                    <p:tree id="menu" rendered="#{fn:length(viewScope.rootTree.children) != 0}" widgetVar="perms"
                            value="#{viewScope.rootTree}"
                            style="max-height: 250px; overflow: auto; border: transparent; padding:0px;"
                            selectionMode="checkbox"
                            var="node" datakey="#{node.id}" selection="#{viewScope.vo.accesses}">
                        <p:ajax event="select" listener="#{controller.onSelect}" process="@this"
                                update="@(.grid-checkbox)" global="false"/>

                        <p:ajax event="unselect" listener="#{controller.onSelect}" process="@this"
                                update="@(.grid-checkbox)" global="false"/>
                        <p:treeNode>
                            <h:outputText value="#{node.title}"/>
                        </p:treeNode>
                    </p:tree>
                </p:fieldset>
                <p:fieldset legend="#{msg['blog']['authOperate']}" styleClass="p-col-12 grid-checkbox ">
                    <h:outputText value="#{msg['framework']['noRecords']}" style="line-height: 30px;"
                                  rendered="#{fn:length(viewScope.operates) eq 0}"/>
                    <p:selectManyCheckbox id="operate" value="#{viewScope.vo.operates}"
                                          rendered="#{fn:length(viewScope.operates) ne 0}"
                                          columns="6" layout="responsive">
                        <f:selectItems value="#{viewScope.operates}" var="operate" itemLabel="#{operate}"
                                       itemValue="#{operate}"/>
                    </p:selectManyCheckbox>
                </p:fieldset>

            </framework:dialog>
        </h:form>

    </ui:define>
</ui:composition>